<template>
  <div class="draggable_content">
    <div class="header">
      <el-input
        placeholder="请输入商品名称"
        :prefix-icon="Search"
        v-model="data.searchValue"
        @input="handelInputSerch"
      ></el-input>
    </div>
    <div class="content">
      <draggable v-model="data.myArray" group="people" @start="drag = true" @end="drag = false" item-key="id">
        <template #item="{ element, index }">
          <div>
            <div class="file" @click="handelClickFirstFile(element, index)" :class="data.num == index ? 'active' : ''">
              <!-- <span v-if="element.list.length > 0">
                <el-icon size="20" color="#909399" v-if="element.isExpand"><CaretBottom /></el-icon>
                <el-icon size="20" color="#909399" v-else><CaretTop /></el-icon>
              </span> -->
              <!-- <img :src="fileImg" alt="" /> -->
              <div class="file_operate">
                <span>
                  <el-input v-if="element.isEdit" v-model="element.projectName" @blur="handelBlur(element)"></el-input>
                  <span v-else>{{ element.projectName }}</span>
                </span>
                <div class="file_operate_right">
                  <!-- <img :src="move" alt="" /> -->
                  <!-- <el-switch v-model="element.isStatus" @change="handelChnageStatus(element)" />
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      <img :src="more" alt="" />
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          command="a"
                          v-for="(item, i) in data.operateList"
                          :key="i"
                          @click="handelClickOperate(element, item)"
                          >{{ item.name }}</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown> -->
                </div>
              </div>
            </div>
          </div>
        </template>
      </draggable>
    </div>
    <div class="add_file">
      <!-- <el-button :icon="Plus" type="primary" @click="handelClickAddFile">新建工程类型</el-button> -->
    </div>
  </div>
</template>
<script setup>
// 资源导入
import { reactive, defineEmits, watch, defineProps } from "vue";
import draggable from "vuedraggable";
import { Search, Plus } from "@element-plus/icons-vue";
import more from "@/static/images/more.png";
import { ElMessage } from "element-plus";
// api
import { createProject, changeStatus, deleteProject, copyProject } from "@/apis/createFile/index.js";
// 变量定义
const emits = defineEmits(["addEngTypeList", "getTableList", "serch"]);
const props = defineProps({
  list: {
    type: Array,
    required() {
      return [];
    }
  },
  item: {
    type: Object,
    required() {
      return {};
    }
  }
});
const data = reactive({
  searchValue: "",
  // 选中的数据
  selectedData: {},
  num: 0,
  // 拖动列表数据
  myArray: [
    // {
    //   id: 1,
    //   fileName: "文件夹2 1",
    //   isExpand: false,
    //   isEdit: false,
    //   list: [
    //     { id: 1, fileName: "文件夹2 16666", isExpand: true },
    //     { id: 2, fileName: "文件夹2 1666699999", isExpand: true }
    //   ]
    // }
  ],
  fileItem: [],
  operateList: [
    { id: 2, name: "编辑", command: "b" },
    { id: 3, name: "复制", command: "c" },
    { id: 4, name: "删除", command: "d" }
  ],
  operateListChildFile: [
    { id: 2, name: "编辑", command: "b" },
    { id: 3, name: "复制", command: "c" },
    { id: 4, name: "删除", command: "d" }
  ],
  engineeringTypeList: [],
  choseItem: {}
});
// 方法定义
const handelClickFirstFile = (item, index) => {
  console.log(item, "jjjjjjjjj");
  // 是否打开当前项
  // item.isExpand = !item.isExpand;
  // 赋值给选中的数据
  data.selectedData = item;
  data.num = index;
  emits("getTableList", item);
};
const handelInputSerch = v => {
  emits("serch", v);
};
// 新建工程文件
const handelClickAddFile = () => {
  // const item = {
  //   id: Date.now(),
  //   fileName: "文件夹",
  //   isExpand: true, //是否展开
  //   isEdit: false, //是否编辑状态
  //   list: []
  // };
  // if (Object.keys(data.selectedData).length <= 0) {
  //   data.myArray.push(item);
  // } else {
  //   data.myArray.splice(data.num + 1, 0, item);
  // }
  if (Object.keys(props.item).length <= 0) {
    ElMessage({
      message: "请先选择定额模板",
      type: "warning"
    });
    return;
  }
  const parms = {
    ...data.fileItem
  };
  createProject(parms)
    .then(() => {
      console.log("成功");
      emits("addEngTypeList", data.fileItem);
    })
    .catch(err => {
      console.log(err);
    });
};
// 更多操作
const handelClickOperate = (element, item) => {
  console.log(element, item);
  // const childrenItem = {
  //   id: Date.now(),
  //   fileName: "文件夹",
  //   isExpand: true, //是否展开
  //   isEdit: false //是否编辑状态
  // };
  const command = item.command;
  if (command === "b") {
    element.isEdit = true;
  } else if (command === "a") {
    // element.list.push(childrenItem);
  } else if (command === "d") {
    // element.list.push(childrenItem);
    deleteProject(element.projectId).then(() => {
      ElMessage({
        message: "删除成功",
        type: "success"
      });
      // console.log();

      emits("addEngTypeList", data.engineeringTypeList);
    });
  } else if (command === "c") {
    copyProject(element.projectId).then(() => {
      ElMessage({
        message: "复制成功",
        type: "success"
      });
      emits("addEngTypeList", data.engineeringTypeList);
    });
  }
};
// 失去焦点时保存当前文件的名称并不让在编辑
const handelBlur = element => {
  element.isEdit = false;
  createProject(element)
    .then(res => {
      console.log("成功");
      emits("addEngTypeList");
    })
    .catch(err => {
      console.log(err);
    });
};
const handelChnageStatus = item => {
  console.log(item.status);

  changeStatus({
    projectId: item.projectId,
    status: item.isStatus == true ? 1 : 0
  }).then(() => {
    emits("addEngTypeList", data.engineeringTypeList);
  });
};
const handelClickChildItem = item => {
  console.log(item);
  data.engineeringTypeList.push(item);
  emits("addEngTypeList", data.engineeringTypeList);
};
// 生命周期
// 监听
watch(
  () => props.list,
  list => {
    data.myArray = list;
    // data.choseItem = list[0];
    // if (data.choseItem == undefined) return;
    // setTimeout(() => {
    //   if (Object.keys(data.choseItem).length > 0) {
    //     emits("getTableList", data.choseItem);
    //   }
    // }, 2500);
  },
  { deep: true, immediate: true }
);
watch(
  () => props.item,
  list => {
    data.fileItem = list;
  },
  { deep: true, immediate: true }
);
</script>
<style scoped lang="scss">
.active {
  background-color: #d9e8ff !important;
}
.file_operate {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  &_right {
    display: flex;
    align-items: center;
  }
}
.draggable_content {
  padding: 20px;
  width: 201px;
  height: calc(100% - 40px);
  // background-color: #fff;
  overflow: hidden;
  border-right: 1px solid #c2d4e8;
  .header {
    font-size: 18px;
    color: #131414;
    // padding: 20px;
    overflow: hidden;
    :deep(.el-input__wrapper) {
      background-color: #fff !important;
    }
  }
}
// 拖拽外层内容css
.content {
  margin-top: 20px;
  height: calc(100% - 90px);
  overflow: scroll;
}
.file {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  img {
    width: 16px;
  }
  span {
    margin-left: 10px;
  }
}
.child_file {
  padding-left: 20px;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #000;
  box-sizing: border-box;
  span {
    margin-left: 10px;
  }
  img {
    width: 16px;
  }
}
.add_file {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
